<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>学生宿舍管理系统</title>
    <style>
        body {
            background: url('image/1.jpg') no-repeat;
            background-size: 100% 130%;
        }

        #login_box {
            width: 20%;
            height: 400px;
            background-color: #00000060;
            margin: auto;
            margin-top: 10%;
            text-align: center;
            border-radius: 10px;
            padding: 50px 50px;
        }

        h2 {
            color: #ffffff90;
            margin-top: 5%;
        }



        input {
            border: 0;
            width: 60%;
            font-size: 15px;
            color: #fff;
            background: transparent;
            border-bottom: 2px solid #fff;
            padding: 5px 10px;
            outline: none;
            margin-top: 10px;
        }

        button {
            margin-top: 50px;
            width: 60%;
            height: 30px;
            border-radius: 10px;
            border: 0;
            color: #fff;
            text-align: center;
            line-height: 30px;
            font-size: 15px;
            background-image: linear-gradient(to right, #f1ab0e, #ead63c);
        }


    </style>
</head>

<body>
<div id="login_box">
    <h2>登录</h2>
    <form id="formId"  method="post">


        <input type="text" name="name" placeholder="请输入用户名">


        <input type="text" name="password" placeholder="请输入密码">


    <input type="text" name="code" placeholder="请输入验证码"/>
<br>
    <img id="verigyCodeId" type="button" src="<%=request.getContextPath()%>/verifyCode" onclick="refresh()"/>
    <br>
    <button type="button" onclick="submitFrom()">登录</button>
    </form>
</div>

<script src="<%=request.getContextPath()%>/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=request.getContextPath()%>/static/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=request.getContextPath()%>/static/mylayer.js" type="text/javascript" charset="utf-8"></script>
<script>
    function refresh() {
        $('#verigyCodeId').attr('src', '<%=request.getContextPath()%>/verifyCode?' + Math.random());
    }
    function  submitFrom(){
        $.post(
            '<%=request.getContextPath()%>/user?method=login',
            $('#formId').serialize(),
            function (jsonObj){
                console.log(jsonObj);
                if (jsonObj.code ==0 ){
                    console.log("-----------------------------------mmm")
                    mylayer.okUrl(jsonObj.msg,'<%=request.getContextPath()%>/');

                }else {
                    mylayer.errorMsg(jsonObj.msg);
                }
            },
            'json'
        );
    }
</script>
</body>
</html>
